<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薛凯凯的个人主页</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
    <script src="./lib/jquery-3.2.1.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <!-- 标题开始 -->
    <div class="header text-center" id="head">薛凯凯的个人主页</div>
    <!-- 标题结束 -->
    <!-- 导航开始 -->
    <div class="nav">
        <div class="text-center nav1">
            <a href="#message">个人信息</a>
            <a href="#like">兴趣爱好</a>
            <a href="#appraise">自我评价</a>
            <a href="#planning">未来规划</a>
        </div>
    </div>
    <!-- 导航结束 -->
    <!-- 介绍开始 -->
    <div class="personal" id="message">
        <div id="data">
            <p>姓名:薛凯凯</p>
            <p>性别:男</p>
            <p>年龄:22岁</p>
            <p>生日:1998-10-21</p>
            <p>家乡:湖北省天门市</p>
            <p>学校:湖北大学知行学院</p>
        </div>
        <div class="title text-center" id="like">
            <a href="#">个人信息</a>
        </div>
        <div class="picture1">
            <img src="./images/pexels-luizclas-1804796.jpg" alt="">
        </div>
    </div>
    <div class="personal personal1" id="like">
        <div id="data">
            <p>喜欢的运动:篮球</p>
            <p>喜欢的音乐:方大同</p>
            <p>喜欢的剧:金庸武侠</p>
            <p>喜欢的小说:三国演义</p>
            <p>才艺:B-box</p>
            <p>偶像:德里克罗斯</p>
        </div>
        <div class="title text-center">
            <a href="#">兴趣爱好</a>
        </div>
        <div class="picture2">
            <img src="./images/lanqiu.jpg" alt="">
        </div>
        <div class="picture3">
            <img src="./images/fdt.jpg" alt="">
        </div>
        <div class="picture4">
            <img src="./images/jy.jpg" alt="">
        </div>
        <div class="picture5">
            <img src="./images/jby.jpg" alt="">
        </div>
        <div class="picture6">
            <img src="./images/bbox.jpg" alt="">
        </div>
        <div class="picture7">
            <img src="./images/ouxiang.jpg" alt="">
        </div>
    </div>
    <div class="personal personal1" id="appraise">
        <div id="data">
            <p>我是一个比较内向寡言的人</p>
            <p>没有很大的梦想</p>
            <p>也没有宏伟的目标</p>
            <p>经历过了一些事</p>
            <p>也明白了一些道理</p>
            <p>只想丰衣足食平平淡淡的活着</p>
        </div>
        <div class="title text-center">
            <a href="#">自我评价</a>
        </div>
        <!-- <div class="picture2">
            <img src="./images/lanqiu.jpg" alt="">
        </div> -->
        <div class="picture3">
            <img src="./images/1.jpg" alt="">
        </div>
        <div class="picture4">
            <img src="./images/2.jpg" alt="">
        </div>
        <!-- <div class="picture5">
            <img src="./images/jby.jpg" alt="">
        </div> -->
        <div class="picture6">
            <img src="./images/3.jpg" alt="">
        </div>
        <div class="picture7">
            <img src="./images/4.jpg" alt="">
        </div>
    </div>
    <div class="personal personal1" id="planning">
        <div id="data">
            <p>我运气不错，有两个本专业的实习机会。</p>
            <p>一处在北京。</p>
            <p>一处在深圳。</p>
            <p>最后我选择了北京。</p>
            <p>虽说我的技术很差。</p>
            <p>但我相信我可以成为优秀的前端工程师。</p>
        </div>
        <div class="title text-center">
            <a href="#">未来规划</a>
        </div>
        <div class="picture4">
            <img src="./images/bj.jpg" alt="">
        </div>
        <div class="picture7">
            <img src="./images/dn.jpg" alt="">
        </div>
    </div>
    <!-- 介绍结束 -->
    <!-- 固定导航开始 -->
    <div class="footer-nav" id="footer-nav">
        <a href="#head">返回顶部</a>
    </div>
    <div class="footer-nav1" id="footer-nav1">
        <a href="#head">返回小组</a>
    </div>
    <!-- 固定导航结束 -->
    <script>
        $(window).scroll(function(){
            var scrollTop = $(window).scrollTop();
            var opacity = scrollTop/200;
            if(opacity>1){
                opacity = 1
            }
            console.log(opacity)
            $(".footer-nav, .footer-nav1").css({opacity:opacity})
        }) 
     </script>
</body>
</html>